<template>
    <div class="maparea">
        <div id="aamap"></div>
    </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import chengdujson from "@/config/chengdu.json"
import mapBg from "@/assets/images/71693535066_.pic.jpg"
import mapBg_2 from "@/assets/images/81693535067_.pic.jpg"

onMounted(() => {
    var myChart = echarts.init(document.getElementById('aamap'));
    echarts.registerMap('map', chengdujson, {});
    let option = {
        backgroundColor: "#99d7f5",
        geo: {
            show: true,
            aspectScale: 0.95, //地图长度比
            zoom: 1.1,
            map: 'map',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: false, //地图设置不可拖拽，固定的
            itemStyle: {
                normal: {
                    areaColor: '#7ef2ff',
                    shadowColor: '#fff',
                    shadowOffsetX: -6,
                    shadowOffsetY: 6,
                    shadowBlur: 12,
                },
                emphasis: {
                    show: false,
                    areaColor: '#00684d',
                    borderWidth: 0,
                    color: '',
                    label: {
                        show: false
                    }
                }
            }
        },
        series: [{
            select: {
                label: {
                    color: '#fff'
                },
                itemStyle: { //选择后的样式
                    borderColor: '#a5f2fc',
                    borderWidth: 1,
                    color: '#267df2', //设置地图点击后的颜色
                    shadowColor: "#00684d", //阴影颜色
                    shadowBlur: 10, //阴影浓度
                }
            },
            name: '',
            itemStyle: {
                normal: { //未选中状态
                    borderWidth: 1, //边框大小
                    borderColor: '#a5f2fc',
                    // areaColor: '#267df2', //背景颜色
                    label: {
                        show: true, //显示名称
                        formatter: function (params:any) {
                            return params.name
                        }
                    },
                    areaColor: {
                        image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    }
                },
                emphasis: { // 移动样式
                    borderWidth: 1,
                    borderColor: '#a5f2fc',
                    shadowColor: "rgba(0,0,0,.6)", //阴影颜色
                    shadowBlur: 10, //阴影浓度
                    // areaColor: '#267df2',
                    label: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    areaColor: {
                        image: mapBg_2, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                        // import mapBg_2 from '../../../assets/img/bigscreen/mapBg_2.png'
                        // image: mapBg_2 || document.createElement("img"),
                        repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                    },
                }
            },
            type: 'map',
            mapType: 'map',
            aspectScale: 0.95, //地图长度比
            zoom: 1.1,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#000',
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            // data: dataArr
        }]
    }
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
})
</script>

<style lang="scss" scoped>
.maparea {
    width: 100%;
    height: 100vh;
    position: relative;
}

#aamap {
    width: 100%;
    height: 110%;
    background-size: 100% 110%;
    div {
        pointer-events: none;
    }

    // background-size: contain;


    .gymap {
        width: 292px;
        height: 213px;
        background: url('../../../assets/img/bigscreen/popup.png') 100% 100% no-repeat;
        // background-size: contain;
        padding: 8px;
        box-sizing: border-box;
        position: relative;

        .line-left {
            width: 200px;
            height: 50px;
            display: block;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;



        }

        li {
            position: relative;
            padding: 10px 20px;
        }

        &_top {
            height: 50px;
            width: 100%;
        }



        .main {
            // height: calc(100% - 50px);
            height: 160px;

            .item {
                margin-left: 20px;

                span {
                    color: #00EAFF;
                }
            }
        }

    }

    .tooltipBox {
        width: 200px !important;
        height: 200px !important;
        background-color: orange !important;
    }
}

.typebtn {
    position: absolute;
    bottom: 30px;
    right: 20px;

    .btnItem {
        width: 170px;
        height: 32px;
        background: url('../../../assets/img/bigscreen/mapbtn-bg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 32px;
        margin-bottom: 10px;
        font-size: 14px;
        font-style: italic;
        color: #73FDFF;

    }

    .choosed {
        width: 170px;
        height: 32px;
        background: url('../../../assets/img/bigscreen/mapbtn-bg1.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 32px;
        margin-bottom: 10px;
        font-size: 14px;
        font-style: italic;
        color: #FFFFFF;

    }
}
</style>